<template>
  <div class="tree-children" v-if="childList.length > 0">
    <div class="tree-node" v-for="child in childList" :key="child.id">
      <div class="tree-content">
        <!-- {{ :style="{ 'padding-left': 18 * level + 'px' }" }} -->
        <!-- <el-icon><CaretRight /></el-icon> -->
        <!-- <span>test-level1-1</span> -->

        <div v-for="(partition, key) in Array(level).fill('')" class="partition">
          <span v-if="key == 0">└─</span>
          <span v-if="key > 0">──</span>
          <!-- <span v-if="key == 0">├─</span> -->
          <!-- <span v-if="key == 0">│</span> -->
        </div>
        <Checkbox :id="child.id" :title="child.title" :checkedKeys="checkedKeys" @change="checkedChange"></Checkbox>
      </div>
      <!-- <div class="tree-children"></div> -->
      <AuthItem
        v-if="child.children.length > 0"
        :level="level + 1"
        :childList="child.children"
      ></AuthItem>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject } from 'vue';
import { Checkbox } from '/@/components/Checkbox/index'

export default defineComponent({
  components: {
    Checkbox
  },
  props: {
    childList: {
      type: Array,
      required: true,
    },
    level: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const { childList, level }: { childList: any[]; level: number } = props;

    const checkedChange: any = inject('checkedChange');
    const checkedKeys: any[] = inject('checkedKeys') as any[];

    return {
      checkedChange,
      checkedKeys,
      childList,
      level,
    };
  },
});
</script>

<style lang="scss" scoped>
.role-container {
  .content {
    background-color: #fff;
    .breadcrumb {
      padding: 10px;
    }
  }
}

.tree-node {
  .tree-content {
    display: flex;
    align-items: center;
    margin: 10px 0;
    position: relative;
    .tree-children {
      display: flex;
    }

    .partition {
      margin-right: 10px;
    }
  }
}

</style>

<style>
/* .tree-children {
  display: flex;
  flex: 0 0 100px;
} */
</style>